<template>
  <div class="tw-camera">
   <template v-if="this.data.length > 0">
    <video-player
      :key="playerOptions.sources[0].src"
      class="m-vedio-item video-player vjs-custom-skin"
      ref="videoPlayer1"
      :options="playerOptions"
      @play="onPlayerPlay($event)"
      @pause="onPlayerPause($event)">
    </video-player>
    <div v-if="disabledClick" class="tw-camera-cover"></div>
   </template>
  </div>
</template>

<script>
import 'video.js/dist/video-js.css'
import VideoPlayer from 'vue-video-player'
// import 'videojs-flash'
import 'videojs-contrib-hls'
const props = require('./props')
window.Vue.use(VideoPlayer)

export default {
  name: 'chart-camera-base',

  props,

  computed: {
    playerOptions () {
      let height = this.height
      let width = this.width ? this.width : parseInt(document.body.scrollWidth)
      if (this.fullscreen) {
        height = document.body.clientHeight || this.height
        width = document.body.clientWidth || this.width
      }
      if (this.fullscreen && this.$el && this.$el.offsetHeight) {
        height = this.$el.offsetHeight
      }

      return {
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        height: height,
        width: width,
        autoplay: this.autoPlay,
        noop: this.noop,
        preload: 'auto',
        aspectRatio: '16:9',
        fluid: true,
        language: 'zh-CN',
        sources: [{
          type: 'application/x-mpegURL',
          src: (this.data.length > 0 && this.data[0].url) ? this.data[0].url : ''
        }],
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true  // 全屏按钮
        },
        flash: { hls: { withCredentials: false } },
        html5: { hls: { withCredentials: false } },
        poster: (this.data.length > 0 && this.data[0].imgUrl) ? this.data[0].imgUrl : '',
        notSupportedMessage: '抱歉，您访问的视频暂时无法播放！'
      }
    }
  },

  mounted () {
    // this.init()
  },

  data () {
    return {
      // autoPlay: false,
      // playerOptions: {
      //   height: '600',
      //   width: '700',
      //   autoplay: true,
      //   language: 'zh-CN',
      //   sources: [{
      //     type: 'application/x-mpegURL',
      //     src: ''
      //   }],
      //   controlBar: {
      //     timeDivider: false,
      //     durationDisplay: false
      //   },
      //   flash: { hls: { withCredentials: false } },
      //   html5: { hls: { withCredentials: false } },
      //   poster: '',
      //   notSupportedMessage: '抱歉，您访问的视频暂时无法播放！'
      // },
      // active: 0,
      // currentStep: 0,
      // cameras: [],
      // fullscreen: true
    }
  },
  methods: {
    init () {
      this.playerOptions.sources[0].src = this.data[0].url
    },
    onPlayerPlay (player) {
      // console.log('')
    },
    onPlayerPause (player) {
      // console.log('')
    }
  },
  beforeDestroy () {

  },

  watch: {
    // data: {
    //   deep: true,
    //   handler () {
    //     // this.init()
    //   }
    // },
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
